<template>
  <div class="wrap">
    <div class="dailyTop">
      <span class="datamet" @click="datyMent()">日报管理</span>&nbsp;&nbsp;>&nbsp;
      <span class="datalog">全部待确认</span>
    </div>
    <el-row>
      <el-col :span="4">
        <menuleft :menuList="menuList" @handleMenu="handleMenu" :menuFlag="showFlag" />
      </el-col>
      <el-col :span="20">
        <div class="groups-box" v-if="roleId === 16">
          <el-select v-model="fid" placeholder="请选择职能组" @change="changeGroup">
            <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            <!-- <el-option label="全部" :value="(fid = 0)" v-if="fid == 0"></el-option> -->
          </el-select>
        </div>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <el-table-column prop="deptName" label="职能组" align="center" width="180"></el-table-column>
          <el-table-column prop="username" label="姓名" align="center" width="180"></el-table-column>
          <el-table-column v-if="flag" prop="taskDate" align="center" label="任务日期"></el-table-column>
          <el-table-column v-else prop="taskDate" align="center" label="计划日期"></el-table-column>
          <el-table-column prop="projectName" align="center" label="项目名称" width="200"></el-table-column>
          <el-table-column v-if="flag" prop="time" align="center" label="工时（天）"></el-table-column>
          <el-table-column prop="content" align="center" label="工作内容" width="250"></el-table-column>
          <el-table-column prop="createTime" align="center" :formatter="timerMatter" label="上报时间"></el-table-column>
          <el-table-column prop="isConfirm" align="center" :formatter="formatter" label="状态"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success" plain @click="handleEndClick(scope.$index, scope.row)">确认
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import menuleft from "@/components/menuItem/menuleft.vue";
import { unconfirmed, confirm, selectFunctionGroupList,selectGroupAttr } from "@/service/Api";

export default {
  name: "confirmHours",
  components: { menuleft },
  data() {
    return {
      id: this.$route.query.fid, // 职能组id
      roleId: JSON.parse(sessionStorage.getItem("userInfo")).roleId, //角色id
      islead: JSON.parse(sessionStorage.getItem("userInfo")).isLeader,
      loading: true,
      groupsList: [], //职能组
      fid: 0, // 职能组id
      tableData: [],
      task: [], //任务
      plan: [], //计划
      flag: true, // true 工时/false 计划
      menuList: [
        {
          name: "全部待确认",
          id: "1",
          children: [
            {
              name: "待确认工时",
              id: "11",
              flag: true,
            },
            // {
            //   name: "待确认计划",
            //   id: "12",
            //   flag: true,
            // },
          ],
        },
      ],
      showFlag: "11",
    };
  },
  created() {
    this.fid = this.id
    this.getList();
    // 职能组下拉查询
    this.groups();

  },
  methods: {
    //返回日报管理
    datyMent() {
      this.$router.push({ path: "/daily" });
    },

    formatter(row, column, cellValue, index) {
      if (cellValue === 0) return "未确认";
      else return "已确认";
    },
    timerMatter(row, column, cellValue, index) {
      return cellValue.replace("T", " ");
    },
    handleMenu(val) {
      if (val == 11) {
        this.flag = true;
        this.tableData = this.task;
      } else {
        this.flag = false;
        this.tableData = this.plan;
      }
    },
    // 确认日报
    handleEndClick(index, row) {
      // this.$confirm('', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   });
      // });

      //判断是确认工时还是计划
      // if(this.flag){
      confirm(row.id).then((response) => {
        if (response.code === 0) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
      // }
    },

    getList() {
      unconfirmed(this.fid).then((res) => {
        if (res.code == 0) {
          this.task = res.data.task;
          this.plan = res.data.plan;
          this.loading = false;
          // this.tableData = this.task
          if (this.flag) this.tableData = this.task;
          else this.tableData = this.plan;
        }
      });
    },
    // 职能组
    groups() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          this.groupsList = res.data;
          let f;
          let arr = [];
          res.data.forEach(item => {
            arr.push(item.id);
            f = arr.join(",")
          })
          let list = [
            {
              id: f,
              name: "所有职能组",
            },
          ];
          list.push(...res.data);
          this.groupsList = list;
          if (res.data.length > 0) {
            let userInfo = sessionStorage.getItem("userInfo");
            // if (this.roleId == 16) {
            //   this.fid = f;
            //   this.getList()
            // } else {
              this.fid = JSON.parse(userInfo).fid;
            // }
          }
        }
      });
    },
    changeGroup(val) {
      console.log("职能组id", val);
      // this.fid = val;
      let obj = {};
      obj = this.groupsList.find((item) => {
        return item.id === val;
      });
      this.getList();
    },
    // changeGroup(val) {
    //   console.log("职能组id", val);
    //   let obj = {};
    //   obj = this.groupsList.find((item) => {
    //     return item.id === val;
    //   });
    //   this.getList();
    // },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  margin: 20px;

  .dailyTop {
    display: flex;
    padding: 20px 20px;
  }

  .datalog {
    font-weight: bolder;
  }

  .datamet {
    cursor: pointer;
  }

  .datamet:hover {
    color: red;
  }
}

.groups-box {
  padding: 20px 0px;
}
</style>
